<template>
	<cu-custom show-circle></cu-custom>
	<!-- <view class="page-title">
		宁波智慧教育督导助手
	</view> -->
	
	<view class="white-page">
		<view style="height: calc(50vh - 360rpx)"></view>
		<view class="page-content">
			<view class="cu-form-group" v-if="mode === 'phone'">
				<view class="title">+86</view>
				<input :enable-native="false" placeholder="请输入手机号码" name="input">
			</view>
			<view class="cu-form-group" v-if="mode === 'phone'">
				<view class="title">验证码</view>
				<input :enable-native="false" placeholder="请输入验证码" name="input">
				<view
					:class="getCodeable ? 'bg-blue' : 'bg-gray'"
					class='cu-btn circle code-btn'
					@click="getCode">{{ codeText }}</view>
			</view>
			<view class="cu-form-group" v-if="mode === 'account'">
				<view class="title">账号</view>
				<input :enable-native="false" placeholder="请输入账号" name="input" v-model="account">
			</view>
			<view class="cu-form-group" v-if="mode === 'account'">
				<view class="title">密码</view>
				<input :enable-native="false" placeholder="请输入密码" password name="input"  v-model="password">
			</view>
			
			<view class="margin-tb-sm">
				<view class="fast-login-btn mb-3">
					<text>已有帐号？</text><text class="text-blue" @click="switchLogin">一键登录</text>
				</view>
				<view class="cu-btn bg-blue lg login-btn" @click="handleLogin">登录</view>
			</view>
		</view>
	</view>
	
	
</template>

<script setup lang="ts">
import { type Ref, ref } from "vue"
import { router } from "@/router"
import store from "@/store/index.js"

const handleLogin = ():void => {
	if (!account.value) {
		uni.showToast({
			icon: "none",
			title: "请输入用户名"
		})
		return
	}
	if (!password.value) {
		uni.showToast({
			icon: "none",
			title: "请输入密码"
		})
		return
	}
	uni.showLoading({
		title: "登陆中"
	})
	store.dispatch("passwordLogin", {
		username: account.value,
		password: password.value
	})
		.then((res) => {
			uni.hideLoading()
			router.replaceAll("/pages/index/index")
		})
		.catch((err) => {
			console.log(err)
			uni.hideLoading()
		})
}

// const codeInterval = null
const mode:Ref<string> = ref("account")
const account:Ref<string> = ref("")
const password:Ref<string> = ref("")

const codeText:Ref<number|string> = ref("验证码")
const getCodeable:Ref<boolean> = ref(true)
const getCode = ():void => {
	if (!getCodeable.value) return
	getCodeable.value = false
	codeTiming()
}
const codeTiming = ():void => {
	if (typeof codeText.value === 'string') {
		codeText.value = 59
		setTimeout(() => {
			codeTiming()
		}, 1000)
	} else {
		if (codeText.value > 0) {
			codeText.value = codeText.value - 1
			setTimeout(() => {
				codeTiming()
			}, 1000)
		} else {
			getCodeable.value = true
			codeText.value = "验证码"
		}
	}
}
const switchLogin = ():void => {
	router.replaceAll("/pages/user/fastlogin")
}
</script>

<style lang="stylus" scoped>
.white-page
	height: 100vh
	background-color: #fff
.page-title
	position: fixed
	width: 100%
	color: #fff
	font-size: 40rpx
	text-align: center
	margin-top: 22rpx
.cu-form-group
	padding 0
	.title
		min-width: calc(4em + 5px)
	input
		letter-spacing: 4rpx
.login-btn
	width 100%
.cu-btn
	transition: all .3s
.cu-btn:active
	background-color: #2f61b8
.fast-login-btn
	font-size: 28rpx
.code-btn
	min-width: 144rpx
</style>